<template>
  <div>
    <el-form label-width="80px" size="mini">
      <el-row :gutter="10">
        <el-col  style="width: 300px;">
          <el-form-item label="学员姓名:">
            <el-input placeholder="学生姓名"  v-model="filterData.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col  style="width: 300px;">
          <el-form-item label="学员:">
            <el-input placeholder="学号" v-model="filterData.studyid"></el-input>
          </el-form-item>
        </el-col>

        <el-col  style="width: 300px;">
          <el-form-item label="身份证号:">
            <el-input placeholder="身份证号" v-model="filterData.idcard"></el-input>
          </el-form-item>
        </el-col>

        <el-col  style="width: 300px;">
          <el-form-item label="家长电话:">
            <el-input placeholder="家长电话" v-model="filterData.mobile"></el-input>
          </el-form-item>
        </el-col>

        <el-col  style="width: 100px;">
            <el-button type="primary" icon="el-icon-search">查询学员</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div>
      <div>
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-button-group>
      </div>
    </div>

    <div class="table-wraper">
      <el-table border :data="tableData" style="height: 100%;">
         <el-table-column label="序号" prop="id" width="50px" align="center"></el-table-column>
         <el-table-column label="" type="selection" width="50px" align="center"></el-table-column>
        <el-table-column label="学号" prop="uid" width="80px" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" width="100px" align="center"></el-table-column>
        <el-table-column label="性别" prop="sex" width="60px" align="center"></el-table-column>
        <el-table-column label="出生年月" prop="birth" width="120px" align="center"></el-table-column>
        <el-table-column label="联系电话" prop="mobile" width="120px"  align="center"></el-table-column>
        <el-table-column label="已报名课程" prop="courses" align="center"></el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <el-button-group>
            <el-button icon="el-icon-edit" circle></el-button>
            <el-button icon="el-icon-delete" circle type="danger"></el-button>
          </el-button-group>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; padding-top: 5px;">
      <div style="flex: 1; line-height: 30px;">统计信息</div>
      <div>
        <el-pagination    background      layout="prev, pager, next"   :total="1000"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        filterData:{
            username:'',
            studyid:'',
            idcard:''
        },
        tableData:[
          {id:1,name:"张三",uid:'201499',sex:'男',birth:'2020-12-03',mobile:"180001265589",address:"公园悦府"}
        ]
      }
    }
  }
</script>

<style scoped>
  .table-wraper{
    height:calc(100vh - 200px);
  }
</style>
